<template>
  <div class="parent d-flex flex-column">
    <div class="title d-flex ai-center">
      <div class="divider"></div>
      {{ $t("route.renlianjiance") }}
    </div>
    <div class="content d-flex jc-center ai-center flex-1">
      <div class="d-flex flex-column jc-center ai-center mr-90">
        <UploadImg @updateFile="handleUpload1" />
        <div class="mt-20">{{ $t("renlianjiance.uploadFaceTip") }}</div>
      </div>
      <div class="face-detection-attrs">
        <div class="detail-title">
          <span>{{ $t("renlianjiance.zhiliangfenshu") }}</span>
        </div>
        <div v-show="isUpload">
          <span class="face-detection-quality">{{ faceRecord.quality }}</span>
        </div>
        <div class="detail-title title-last">
          <span>{{ $t("renlianjiance.shuxingxinxi") }}</span>
        </div>
        <div v-show="isUpload">
          <span>{{ $t("renlianjiance.age") }}</span
          ><span>{{
            faceRecord.attribute.st_age_value &&
            Math.round(faceRecord.attribute.st_age_value)
          }}</span>
        </div>
        <div v-show="isUpload">
          <span>{{ $t("renlianjiance.gender") }}</span
          ><span>{{
            this.$t(`faceCode.${faceRecord.attribute.gender_code}`)
          }}</span>
        </div>
        <div v-show="isUpload">
          <span>{{ $t("renlianjiance.huzi") }}</span
          ><span>{{
            this.$t(`faceCode.${faceRecord.attribute.mustache_style}`)
          }}</span>
        </div>
        <div v-show="isUpload">
          <span>{{ $t("renlianjiance.glass") }}</span
          ><span>{{
            this.$t(`faceCode.${faceRecord.attribute.glass_style}`)
          }}</span>
        </div>
        <div v-show="isUpload">
          <span>{{ $t("renlianjiance.cap") }}</span
          ><span>{{
            this.$t(`faceCode.${faceRecord.attribute.st_respirator}`)
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UploadImg from "@/components/UploadImg";
import { detection } from "./service";
export default {
  components: { UploadImg },
  data() {
    return {
      formData: {},
      FaceImg1to1Rsp_Score: void 0,
      faceRecord: { attribute: {} },
    };
  },
  computed: {
    isUpload: {
      get() {
        return !!this.faceRecord.quality;
      },
    },
  },
  methods: {
    handleUpload1(file) {
      this.$set(this.formData, "img", file);
      this.handleDetection();
    },
    async handleDetection() {
      let res = await detection(this.formData);
      if (res.code == 0) {
        this.$set(this, "faceRecord", res.data);
      }
    },
  },
};
</script>

<style scoped lang="less">
.parent {
  height: 100%;
}
.face-detection-attrs {
  text-align: left;
  margin-left: 15px;
  padding-left: 15px;
  border-left: 1px solid #1e88e5;
  line-height: 24px;
  width: 340px;
  font-size: 14px;
}
.face-detection-attrs > .detail-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 1px solid #353f74;
}

.face-detection-attrs > .detail-title > span:nth-child(1) {
  padding: 5px 10px;
  width: auto;
  display: initial;
  background: rgba(242, 242, 242, 0.1);
}
.face-detection-attrs .title-last {
  padding-top: 10px;
}
.face-detection-attrs div {
  width: 100%;
}
.face-detection-attrs > div span:nth-child(1) {
  width: 120px;
  display: inline-block;
  font-weight: bold;
}
.title {
  width: 100%;
  height: 56px;
  line-height: 56px;
  font-weight: bold;
  position: relative;
  background: #fcfcfd;
  font-size: 20px;
  border-radius:8px;
  padding-left:20px;
  .divider {
    background-image: linear-gradient(
      180deg,
      rgba(45, 204, 112, 1) 0,
      rgba(52, 152, 219, 1) 100%
    );
    border-radius: 4px;
    width: 4px;
    height: 20px;
    margin-right: 10px;
  }
}
</style>
